<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	* { margin:0; padding:0; }
	img { border:0; }
	body { font:12px/12px arial; }
	li { list-style:none; }

.control { position:absolute; bottom:10px; left:20px; }
.control button { background:none; padding:0 6px; margin-right:10px; border:1px solid #fff; color:#fff; cursor:pointer; }

.sliders li { width:500px; }

	</style>
</head>
<body>

<p>Emm~Also you can make change^!^</p>

<div class="imageSlider">
	<ul class="sliders">
		<li>
			<img src="img1.jpg" alt="" />
		</li>
		<li>
			<img src="img2.jpg" alt="" />
		</li>
		<li>
			<img src="img3.jpg" alt="" />
		</li>
	</ul>
	<div class="control">
		<button>1</button>
		<button>2</button>
		<button>3</button>
	</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.image.slider.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
		$(".imageSlider").imageSlider({
		'direction': 'vertical',	
		'speed': 600,
		'evtType': 'mouseover'
	})
});	

	
//]]>	
</script>
</body>
</html>
